<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" href="./css/mui-icons-extra.css" />
		<link href="css/mui.css" rel="stylesheet" />
		<link rel="stylesheet" href="./css/style.css" />
		<style>
			.fl-main{
				height: 100vh;
			}
			.fl-right,.fl-left{
				height: 100%;
			}
			.fl-left3{
				    width: 81px;
			}
		</style>
	</head>

	<body>
		<nav class="mui-bar mui-bar-tab" style="display: flex;height: 60px;justify-content: space-around;align-items: center;">
			<a href="./home.html" style="text-align: center;vertical-align: middle;">
				<img src="./images/daohang/pic1.jpg" alt="" width="30" />
				<div style="color: #000;font-size: 12px;transform: translateY(-5px);">首页</div>
			</a>
			<a href="./cate.html" style="text-align: center;">
				<img src="./images/daohang/aba2.jpg" alt="" width="30" />
				<div style="color: #000;font-size: 12px;transform: translateY(-5px);">分类</div>
			</a>
			<a href="./find.html" style="text-align: center;">
				<img src="./images/daohang/DHY03.jpg" alt="" width="30" />
				<div style="color: #000;font-size: 12px;transform: translateY(-5px);">发现</div>
			</a>
			<a href="./shop.html" style="text-align: center;">
				<img src="./images/daohang/pic3.jpg" alt="" width="30" />
				<div style="color: #000;font-size: 12px;transform: translateY(-5px);">购物车</div>
			</a>
			<a href="./my.html" style="text-align: center;">
				<img src="./images/daohang/pic4.jpg" alt="" width="30" />
				<div style="color: #000;font-size: 12px;transform: translateY(-5px);">我的</div>
			</a>
		</nav>
		<div class="mui-content">
			<div class="mui-content-padded">
				<div class="top">
					<input type="text" value="wathch4" />
					<div class="mui-icon-extra mui-icon-extra-sweep"></div>
				</div>
				 <div class="fl-main">
				         <div class="fl-left">
				             <div class="fl-left1">
				                 <div class="fl-left2">
				                     <div class="fl-left3 fl-left4">新品</div>
				                 </div>
				                 <div class="fl-left2">
				                     <div class="fl-left3 ">手机</div>
				                 </div>
				                 <div class="fl-left2">
				                     <div class="fl-left3 ">笔记本</div>
				                 </div>
				                 <div class="fl-left2">
				                     <div class="fl-left3 ">台显打印</div>
				                 </div>
				                 <div class="fl-left2">
				                     <div class="fl-left3 ">平板</div>
				                 </div>
				                 <div class="fl-left2">
				                     <div class="fl-left3 ">穿戴</div>
				                 </div>
				                 <div class="fl-left2">
				                     <div class="fl-left3 ">耳机音箱</div>
				                 </div>
				                 <div class="fl-left2">
				                     <div class="fl-left3 ">智慧屏</div>
				                 </div>
				                 <div class="fl-left2">
				                     <div class="fl-left3 ">门锁路由</div>
				                 </div>
				                 <div class="fl-left2">
				                     <div class="fl-left3 ">数码配件</div>
				                 </div>
				                 <div class="fl-left2">
				                     <div class="fl-left3 ">华为智能</div>
				                 </div>
				                 <div class="fl-left2">
				                     <div class="fl-left3 ">出行车品</div>
				                 </div>
				                 <div class="fl-left2">
				                     <div class="fl-left3 ">甄选美酒</div>
				                 </div>
				                 <div class="fl-left2">
				                     <div class="fl-left3 ">家用电器</div>
				                 </div>
				             
				            
				             </div>
				         </div>
				         <!-- 外 -->
				         <div class="fl-right">
				             <!-- 内1 -->
				             <div class="fl-right1 fl-block">
				                 <!-- 轮播 -->
				                 <div class="fl-lunbo">
				                     <div>
				                         <img src="./images/fl-img/xinpin/lunbo/fl-xp-lunbo01.png" alt="">
				                         <img src="./images/fl-img/xinpin/lunbo/lunbo04.jpg" alt="">
				                         <img src="./images/fl-img/xinpin/lunbo/fl-xp-lunbo03.png" alt="">
				                     </div>
				                     <ul>
				                         <li class="active2"></li>
				                         <li></li>
				                         <li></li>
				                     </ul>
				                 </div>
				                 <!-- 推荐1 -->
				                 <div class="fl-tuijian">
				                     <div class="fl-txt">新品推荐</div>
				                     <!-- 行1-元素 -->
				                     <div class="fl-img">
				                         <!-- 块-元素 -->
				                         <div class="fl-imgx">
				                             <img src="./images/fl-img/xinpin/tuijian/fl-xt01.png" alt="">
				                             <div>MatePad Pro 11英寸</div>
				                         </div>
				                         <div class="fl-imgx">
				                             <img src="./images/fl-img/xinpin/tuijian/fl-xt01.png" alt="">
				                             <div>MatePad Pro 11英寸</div>
				                         </div>
				                         <div class="fl-imgx">
				                             <img src="./images/fl-img/xinpin/tuijian/fl-xt01.png" alt="">
				                             <div>MatePad Pro 11英寸</div>
				                         </div>
				                     </div>
				                     <!-- 行2-元素 -->
				                     <div class="fl-img">
				                         <!-- 块-元素 -->
				                         <div class="fl-imgx">
				                             <img src="./images/fl-img/xinpin/tuijian/fl-xt02.png" alt="">
				                             <div>16s i7/1TB版上新</div>
				                         </div>
				                         <div class="fl-imgx">
				                             <img src="./images/fl-img/xinpin/tuijian/fl-xt02.png" alt="">
				                             <div>16s i7/1TB版上新</div>
				                         </div>
				                         <div class="fl-imgx">
				                             <img src="./images/fl-img/xinpin/tuijian/fl-xt02.png" alt="">
				                             <div>16s i7/1TB版上新</div>
				                         </div>
				                     </div>
				                     <!-- 行3-元素 -->
				                     <div class="fl-img">
				                         <!-- 块-元素 -->
				                         <div class="fl-imgx">
				                             <img src="./images/fl-img/xinpin/tuijian/fl-xt03.png" alt="">
				                             <div>D 16 i7/1TB版上新</div>
				                         </div>
				                         <div class="fl-imgx">
				                             <img src="./images/fl-img/xinpin/tuijian/fl-xt03.png" alt="">
				                             <div>D 16 i7/1TB版上新</div>
				                         </div>
				                         <div class="fl-imgx">
				                             <img src="./images/fl-img/xinpin/tuijian/fl-xt03.png" alt="">
				                             <div>D 16 i7/1TB版上新</div>
				                         </div>
				                     </div>
				                 </div>
				                 <!-- 推荐2 -->
				                 <div class="fl-tuijian">
				                     <div class="fl-txt">车及周边</div>
				                     <!-- 行1-元素 -->
				                     <div class="fl-img">
				                         <!-- 块-元素 -->
				                         <div class="fl-imgx">
				                             <img src="./images/fl-img/xinpin/tuijian/fl-xc01.png" alt="">
				                             <div>问界M7</div>
				                         </div>
				                         <div class="fl-imgx">
				                             <img src="./images/fl-img/xinpin/tuijian/fl-xc01.png" alt="">
				                             <div>问界M7</div>
				                         </div>
				                         <div class="fl-imgx">
				                             <img src="./images/fl-img/xinpin/tuijian/fl-xc01.png" alt="">
				                             <div>问界M7</div>
				                         </div>
				                     </div>
				                     <div class="fl-img">
				                         <!-- 块-元素 -->
				                         <div class="fl-imgx">
				                             <img src="./images/fl-img/xinpin/tuijian/fl-xc02.png" alt="">
				                             <div>问界M5 EV</div>
				                         </div>
				                         <div class="fl-imgx">
				                             <img src="./images/fl-img/xinpin/tuijian/fl-xc02.png" alt="">
				                             <div>问界M5 EV</div>
				                         </div>
				                         <div class="fl-imgx">
				                             <img src="./images/fl-img/xinpin/tuijian/fl-xc02.png" alt="">
				                             <div>问界M5 EV</div>
				                         </div>
				                     </div>
				                     <div class="fl-img">
				                         <!-- 块-元素 -->
				                         <div class="fl-imgx">
				                             <img src="./images/fl-img/xinpin/tuijian/fl-xc03.png" alt="">
				                             <div>问界M5 四驱性能版 </div>
				                         </div>
				                         <div class="fl-imgx">
				                             <img src="./images/fl-img/xinpin/tuijian/fl-xc03.png" alt="">
				                             <div>问界M5 四驱性能版 </div>
				                         </div>
				                         <div class="fl-imgx">
				                             <img src="./images/fl-img/xinpin/tuijian/fl-xc03.png" alt="">
				                             <div>问界M5 四驱性能版 </div>
				                         </div>
				                     </div>
				                 </div>
				             </div>
				             <!-- 内2 -->
				             <div class="fl-right1">
				                 <!-- 轮播 -->
				                 <div class="fl-lunbo2">
				                     <div>
				                         <img src="./images/fl-img/phone/lunbo/fl-ph-lunbo01.png" alt="">
				                         <img src="./images/fl-img/phone/lunbo/fl-ph-lunbo02.png" alt="">
				                         <img src="./images/fl-img/phone/lunbo/fl-ph-lunbo03.png" alt="">
				                     </div>
				                     <ul>
				                         <li class="active3"></li>
				                         <li></li>
				                         <li></li>
				                     </ul>
				                 </div>
				                 <!-- 推荐1 -->
				                 <div class="fl-tuijian">
				                     <div class="fl-txt">【政府补贴专区 满4000减200】</div>
				                     <!-- 行1-元素 -->
				                     <div class="fl-img">
				                         <!-- 块-元素 -->
				                         <div class="fl-imgx">
				                             <img src="./images/fl-img/phone/tuijian/fl-phimg01.png" alt="">
				                             <div>P50系列</div>
				                         </div>
				                         <div class="fl-imgx">
				                             <img src="./images/fl-img/phone/tuijian/fl-phimg02.png" alt="">
				                             <div>nova系列</div>
				                         </div>
				                         <div class="fl-imgx">
				                             <img src="./images/fl-img/phone/tuijian/fl-phimg03.png" alt="">
				                             <div>畅享系列</div>
				                         </div>
				                     </div>
				 
				                 </div>
				                 <!-- 推荐2 -->
				                 <div class="fl-tuijian">
				                     <div class="fl-txt">HUAWEI P系列</div>
				                     <!-- 行1-元素 -->
				                     <div class="fl-img">
				                         <!-- 块-元素 -->
				                         <div class="fl-imgx">
				                             <img src="./images/fl-img/phone/tuijian/fl-ph-x01.png" alt="">
				                             <div>HUAWEI P50</div>
				                         </div>
				                         <div class="fl-imgx">
				                             <img src="./images/fl-img/phone/tuijian/fl-ph-x01.png" alt="">
				                             <div>HUAWEI P50</div>
				                         </div>
				                         <div class="fl-imgx">
				                             <img src="./images/fl-img/phone/tuijian/fl-ph-x01.png" alt="">
				                             <div>HUAWEI P50</div>
				                         </div>
				                     </div>
				                     <!-- 行1-元素 -->
				                     <div class="fl-img">
				                         <!-- 块-元素 -->
				                         <div class="fl-imgx">
				                             <img src="./images/fl-img/phone/tuijian/fl-ph-x01.png" alt="">
				                             <div>HUAWEI P50</div>
				                         </div>
				                         <div class="fl-imgx">
				                             <!-- <img src="./images/fl-img/phone/tuijian/fl-ph-x01.png" alt=""> -->
				                             <!-- <div>HUAWEI P50</div> -->
				                         </div>
				                         <div class="fl-imgx">
				                             <!-- <img src="./images/fl-img/phone/tuijian/fl-ph-x01.png" alt=""> -->
				                             <!-- <div>HUAWEI P50</div> -->
				                         </div>
				                     </div>
				                 </div>
				                 <!-- 推荐3 -->
				                 <div class="fl-tuijian">
				                     <div class="fl-txt">HUAWEI Mate系列</div>
				                     <!-- 行1-元素 -->
				                     <div class="fl-img">
				                         <!-- 块-元素 -->
				                         <div class="fl-imgx">
				                             <img src="./images/fl-img/phone/tuijian/fl-ph-s01.png" alt="">
				                             <div>HUAWEI Mate Xs 2</div>
				                         </div>
				                         <div class="fl-imgx">
				                             <img src="./images/fl-img/phone/tuijian/fl-ph-s02.png" alt="">
				                             <div>Mate X2 5G</div>
				                         </div>
				                         <div class="fl-imgx">
				                             <!-- <img src="" alt=""> -->
				                             <div></div>
				                         </div>
				                     </div>
				                 </div>
				             </div>
				             <!-- 内3 -->
				             <div class="fl-right1">
				                 <!-- 轮播 -->
				                 <div class="fl-lunbo3">
				                     <div>
				                         <img src="./images/fl-img/bijiben/fl-zh.png" alt="">
				                     </div>
				                 
				                 </div>
				                 <!-- 推荐1 -->
				                 <div class="fl-tuijian">
				                     <div class="fl-txt">【政府补贴专区 满8000减400】</div>
				                     <!-- 行1-元素 -->
				                     <div class="fl-img">
				                         <!-- 块-元素 -->
				                         <div class="fl-imgx">
				                             <img src="./images/fl-img/bijiben/fl-zf01.png" alt="">
				                             <div>MateBook X系列</div>
				                         </div>
				                         <div class="fl-imgx">
				                             <img src="./images/fl-img/bijiben/fl-zf02.png" alt="">
				                             <div>MateBook 数字系列</div>
				                         </div>
				                         <div class="fl-imgx">
				                             <img src="./images/fl-img/bijiben/fl-zf03.png" alt="">
				                             <div>MateBook D系列</div>
				                         </div>
				                     </div>
				 
				                 </div>
				                 <!-- 推荐2 -->
				                 <div class="fl-tuijian">
				                     <div class="fl-txt">HUAWEI P系列</div>
				                     <!-- 行1-元素 -->
				                     <div class="fl-img">
				                         <!-- 块-元素 -->
				                         <div class="fl-imgx">
				                             <img src="./images/fl-img/phone/tuijian/fl-ph-x01.png" alt="">
				                             <div>HUAWEI P50</div>
				                         </div>
				                         <div class="fl-imgx">
				                             <img src="./images/fl-img/phone/tuijian/fl-ph-x01.png" alt="">
				                             <div>HUAWEI P50</div>
				                         </div>
				                         <div class="fl-imgx">
				                             <img src="./images/fl-img/phone/tuijian/fl-ph-x01.png" alt="">
				                             <div>HUAWEI P50</div>
				                         </div>
				                     </div>
				                     <!-- 行1-元素 -->
				                     <div class="fl-img">
				                         <!-- 块-元素 -->
				                         <div class="fl-imgx">
				                             <img src="./images/fl-img/phone/tuijian/fl-ph-x01.png" alt="">
				                             <div>HUAWEI P50</div>
				                         </div>
				                         <div class="fl-imgx">
				                             <!-- <img src="./images/fl-img/phone/tuijian/fl-ph-x01.png" alt=""> -->
				                             <!-- <div>HUAWEI P50</div> -->
				                         </div>
				                         <div class="fl-imgx">
				                             <!-- <img src="./images/fl-img/phone/tuijian/fl-ph-x01.png" alt=""> -->
				                             <!-- <div>HUAWEI P50</div> -->
				                         </div>
				                     </div>
				                 </div>
				                 <!-- 推荐3 -->
				                 <div class="fl-tuijian">
				                     <div class="fl-txt">HUAWEI Mate系列</div>
				                     <!-- 行1-元素 -->
				                     <div class="fl-img">
				                         <!-- 块-元素 -->
				                         <div class="fl-imgx">
				                             <img src="./images/fl-img/phone/tuijian/fl-ph-s01.png" alt="">
				                             <div>HUAWEI Mate Xs 2</div>
				                         </div>
				                         <div class="fl-imgx">
				                             <img src="./images/fl-img/phone/tuijian/fl-ph-s02.png" alt="">
				                             <div>Mate X2 5G</div>
				                         </div>
				                         <div class="fl-imgx">
				                             <!-- <img src="" alt=""> -->
				                             <div></div>
				                         </div>
				                     </div>
				                 </div>
				             </div>
				         </div>
				     </div>
				 
			</div>
		</div>
		<script src="js/jquery-1.12.4.js"></script>
		<script src="js/mui.js"></script>
		<script type="text/javascript">
			mui.init()
			$(function () {
			    $(".fl-left2>div").on("click", function () {
			        $(this).addClass('fl-left4').parent().siblings().children().removeClass('fl-left4');
			        // $(this).parent().removeClass('fl-left4');
			    });
			    $(".fl-left2>div").on("click", function () {
			        var idx = $(this).parent().index();
			        // console.log(idx);
			        $(".fl-right1").eq(idx).addClass("fl-block").siblings().removeClass("fl-block");
			    });
			});	
		</script>
	</body>

</html>